<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../../layuiadmin/layui/css/layui.css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/fonts/iconfont.css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/style/admin.css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/style/style.css"
      media="all"
    />
    <style>
      .flowListStep .iconfont {
        font-size: 40px;
      }
      .flowListStep ul.steps {
        padding: 20px;
      }
      .flowListStep ul.steps::-webkit-scrollbar {
        display: none;
      }
      .flowListStep ul.steps {
        list-style: none;
        display: flex;
        overflow-x: auto;
        height: 78px;
      }
      .flowListStep ul.steps:after,
      .flowListStep ul.steps li:after {
        content: "";
        display: block;
        clear: both;
      }
      .flowListStep ul.steps li {
        float: left;
        flex: 1;
        position: relative;
        min-width: 120px;
        color: #666;
      }
      .flowListStep ul.steps li .step-line {
        height: 2px;
        background-color: #ccc;
        margin-top: 15px;
      }
      .flowListStep ul.steps li.step-active .step-line {
        background-color: #374ab5;
        box-shadow: inset 0 1px 1px #374ab5;
      }
      .flowListStep ul.steps li.step-active .step-content {
        color: #374ab5;
      }

      .flowListStep ul.steps .step-content {
        position: absolute;
        top: 0;
        left: -15px;
        text-align: center;
      }
      .flowListStep ul.steps li .step-content .step-num {
        display: inline-block;
        height: 40px;
        width: 100px;
        background-color: #f2f2f2;
        line-height: 30px;
        text-align: center;
      }
      .flowListStep {
        width: 80%;
        margin: 0 auto;
      }
      .flowListStep ul.steps li.step-end {
        width: 120px !important;
        flex: inherit;
      }
      .flowListStep ul.steps li.step-end .step-line {
        display: none;
      }
      .flowListStep ul.steps .stepTime {
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div class="layui-fluid">
      <div class="layui-form">
        <div class="layui-form-item">
          <span class="layui-breadcrumb"></span>
        </div>
        <div class="layui-form-item">
          <img
            src="../../layuiadmin/images/backPage.png"
            class="backPreviousPage"
          />
        </div>
      </div>

      <div class="projectManagementDetail">
        <div class="leftTabTitle">
          <ul class="ele">
            <li class="active"><a href="#">工程概括</a></li>
            <li><a href="#">项目文档</a></li>
            <li><a href="#">项目资料</a></li>
            <li><a href="#">会议信息</a></li>
          </ul>
        </div>
        <div class="projectManagementDetailCon">
          <div class="flowListStep">
            <ul class="steps"></ul>
          </div>
          <div class="projectOverview projectManagementDetailS">
            <ul>
              <li>
                <label>项目编号</label>
                <span class="no"></span>
              </li>
              <li>
                <label>项目名称</label>
                <span class="projectName"></span>
              </li>
              <li>
                <label>申报项名称</label>
                <span class="name"></span>
              </li>
              <li>
                <label>申报类型</label>
                <span class="type"></span>
              </li>
              <li>
                <label>申报人用户名</label>
                <span class="createUser"></span>
              </li>
              <li>
                <label>建设方名称</label>
                <span class="personName"></span>
              </li>
              <li>
                <label>建设方手机</label>
                <span class="phone"></span>
              </li>
              <li>
                <label>建设方邮箱</label>
                <span class="email"></span>
              </li>
              <li>
                <label>建设方全称</label>
                <span class="buildUnitName"></span>
              </li>
              <li>
                <label>联系人姓名</label>
                <span class="contactName"></span>
              </li>
              <li>
                <label>联系方式</label>
                <span class="contactPhone"></span>
              </li>
              <li>
                <label>项目负责人姓名</label>
                <span class="responPerson"></span>
              </li>
              <li>
                <label>项目负责人联系方式</label>
                <span class="responPhone"></span>
              </li>
              <li>
                <label>与轨道交通关系</label>
                <span class="metroRelation"></span>
              </li>
              <li>
                <label>项目地理位置</label>
                <span class="projectAddr"></span>
              </li>
              <li>
                <label>项目状态</label>
                <span class="status"></span>
              </li>
              <li>
                <label>项目概况</label>
                <span class="contentt"></span>
              </li>
              <li>
                <label>管理员工号</label>
                <span class="managerNumber"></span>
              </li>
              <li>
                <label>线路情况</label>
                <span class="lineType"></span>
              </li>
              <li>
                <label>车站</label>
                <span class="stationFlag"></span>
              </li>
              <li>
                <label>区间</label>
                <span class="stationArea"></span>
              </li>
            </ul>
          </div>
          <div class="projectManagementDetailS">
            <h3>项目文档</h3>
            <div style="width: 100%">
              <table
                id="projectDocumentTable"
                lay-filter="projectDocumentTable"
              ></table>
            </div>

            <script type="text/html" id="projectManagementDetailOprea">
              <a
                class="layui-btn layui-btn-xs technicalReviewBtn technicalReviewSee"
                lay-event="projectDocumentSee"
                style="margin-right:10px; "
                >查看</a
              >
              <a
                class="layui-btn layui-btn-xs technicalReviewBtn technicalRequirement"
                lay-event="projectDocumentDown"
                >下载</a
              >
            </script>
            <script type="text/html" id="fileFlag">
              {{# if(d.flag === '终稿'){ }} {{ d.flag }}<i
                class="layui-icon layui-icon-rate-solid"
                style="font-size: 30px; color: red; margin-top: 5px; margin-left: 5px;"
              >
              </i>
              {{# } else { }} {{ d.flag }} {{# } }}
            </script>
          </div>
          <div class="projectManagementDetailS">
            <h3>项目资料</h3>
            <div class="projectDataTablee">
              <table
                id="projectDataTable"
                lay-filter="projectDataTable"
              ></table>
              <script type="text/html" id="projectDataDetailOprea">
                {{# if(d.filetype.indexOf("工程信息概况") === 0 && d.extName ===
                "pdf"&& d.LAY_INDEX < 2 || d.filetype.indexOf("工程信息概况")
                === 0 && d.extName === "PDF" && d.LAY_INDEX < 2 ||(d.sendBack
                === "0")){ }}
                <a
                  class="layui-btn layui-btn-xs technicalReviewBtn technicalReviewSee"
                  lay-event="projectDataSee"
                  >查看</a
                >
                <a
                  class="layui-btn layui-btn-xs technicalReviewBtn technicalRequirement"
                  lay-event="projectDataDown"
                  >下载</a
                >
                {{# if(d.sendBack === "0"){ }}
                <img
                  src="../../layuiadmin/images/returnIcon.png"
                  class="returnIconSty"
                />
                {{# } else { }} {{# } }} {{# } else { }}
                <a
                  class="layui-btn layui-btn-xs technicalReviewBtn technicalRequirement"
                  lay-event="projectDataDownOther"
                  >下载</a
                >
                {{# if(d.sendBack === "0"){ }}
                <img
                  src="../../layuiadmin/images/returnIcon.png"
                  class="returnIconSty"
                />
                {{# } else { }} {{# } }} {{# } }}
              </script>
            </div>
            <!-- <div class="layui-row enclosureList">
              <div class="enclosureListL"></div>
              <div class="enclosureListLt"></div>
            </div> -->
          </div>
          <div class="projectManagementDetailS">
            <h3>补充资料</h3>
            <div class="layui-row enclosureListt"></div>
          </div>
          <div class="projectManagementDetailS">
            <h3>会议资料</h3>
            <div class="conferenceMaterials">
              <div class="layui-tab" lay-filter="conferenceMaterialsTable">
                <ul class="layui-tab-title"></ul>
                <div class="layui-tab-content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/html" id="meetingDocOprea">
      <a
        class="layui-btn layui-btn-xs technicalReviewBtn technicalReviewSee"
        lay-event="meetingDocDelete"
        style="margin-right:10px; "
        >删除</a
      >
      <a
        class="layui-btn layui-btn-xs technicalReviewBtn technicalRequirement"
        lay-event="meetingDocDown"
        >下载</a
      >
    </script>
    <script type="text/html" id="iframePDF">
      <div class="iframePDF"></div>
    </script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/const_config.js"></script>
    <script src="../../layuiadmin/modules/wavesurfer.min.js"></script>
    <script src="../../layuiadmin/modules/jquery.min.js"></script>
    <script src="../../layuiadmin/modules/jTools.js"></script>
    <script>
      layui
        .config({
          base: "../../layuiadmin/", //静态资源所在路径
        })
        .extend({
          index: "lib/index", //主入口模块
        })
        .use(["index", "projectManagementDetail"], function () {});
    </script>
    <script type="text/javascript">
      $(function () {
        function fn1() {
          var $w = $(".projectManagementDetailCon").outerWidth(); //获取安全区域的宽度
          var $offL = $(".projectManagementDetailCon").offset().left; //获取当前内容相对于浏览器的偏移量
          // console.log($offL);
          $(".ele").css("left", $w + $offL + 30); //使得定位始终在这个位置
        }
        fn1();
        $(window).resize(function () {
          fn1(); //随浏览器窗口大小改变
        });
        $(window).scroll(function () {
          var $st = $(window).scrollTop(); //获取滚动条滚动的距离
          $(".projectManagementDetailCon .projectManagementDetailS").each(
            function (i, dom) {
              var $offT = $(this).offset().top; //获得任何一个step的向上偏移距离
              if ($st >= $offT) {
                $(".ele li")
                  .eq(i)
                  .addClass("active")
                  .siblings()
                  .removeClass("active");
              }
            }
          );
        });
        // 点击楼层数
        $(".ele li").click(function () {
          var $i = $(this).index(); //获得点击楼层索引号
          var $offT = $(".projectManagementDetailCon .projectManagementDetailS")
            .eq($i)
            .offset().top; //获取对应的页面向上的偏移量
          console.log($offT);
          $("html,body").animate({ scrollTop: $offT }, 500);
        });
      });
    </script>
  </body>
</html>
